<template>
  <div class="repair_report_detail">
    <div>
      <h3 class="title"><span class="title-icon"></span> <span>基本信息</span></h3>
      <div class="ivu-table-wrapper">
        <div class="ivu-table ivu-table-default ivu-table-border">
          <div class="ivu-table-body">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <colgroup>
                <!-- <col width="266" />
                <col width="266" />-->
              </colgroup>
              <tbody class="ivu-table-tbody">
                <!---->
                <tr v-for="(item, index) in basic" :key="index" class="ivu-table-row">
                  <td v-for="(list, k) in item" :key="k" class>
                    <div class="ivu-table-cell">
                      <span>{{ list.label }}{{ list.value }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <h3 class="title"><span class="title-icon"></span> <span>故障诊断</span></h3>
      <div class="ivu-table-wrapper">
        <div class="ivu-table ivu-table-default ivu-table-border">
          <div class="ivu-table-body">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <colgroup>
                <!-- <col width="266" />
                <col width="266" />-->
              </colgroup>
              <tbody class="ivu-table-tbody">
                <!---->
                <tr v-for="(item, index) in diagnosis" :key="index" class="ivu-table-row">
                  <!-- faultStatusFilter -->
                  <td v-for="(list, k) in item" :key="k" class>
                    <div class="ivu-table-cell">
                      <span v-if="list.key === 'faultLevel'">{{ list.label }}{{ list.value | faultLevelFilters }}</span>
                      <span v-else-if="list.key === 'faultStatus'"
                        >{{ list.label }}{{ list.value | faultStatusFilter }}</span
                      >
                      <span v-else>{{ list.label }}{{ list.value }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <h3 class="title"><span class="title-icon"></span> <span>故障申报</span></h3>
      <div class="ivu-table-wrapper">
        <div class="ivu-table ivu-table-default ivu-table-border">
          <div class="ivu-table-body">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <colgroup>
                <!-- <col width="266" />
                <col width="266" />-->
              </colgroup>
              <tbody class="ivu-table-tbody">
                <!---->
                <tr v-for="(item, index) in declare" :key="index" class="ivu-table-row">
                  <td v-for="(list, k) in item" :key="k" class>
                    <div class="ivu-table-cell">
                      <span>{{ list.label }}{{ list.value }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <h3 class="title"><span class="title-icon"></span> <span>审批操作</span></h3>
      <div class="ivu-table-wrapper">
        <div class="ivu-table ivu-table-default ivu-table-border">
          <div class="ivu-table-body">
            <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
              <colgroup>
                <!-- <col width="266" />
                <col width="266" />-->
              </colgroup>
              <tbody class="ivu-table-tbody">
                <!---->
                <tr v-for="(item, index) in checkAction" :key="index" class="ivu-table-row">
                  <td colspan="2" v-for="(list, k) in item" :key="k" class>
                    <div class="ivu-table-cell">
                      <span v-if="list.key === 'finalReviewStatus'"
                        >{{ list.label }}{{ { 0: '通过', 1: '不通过' }[list.value] }}</span
                      >
                      <span v-else>{{ list.label }}{{ list.value }}</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { rank, maintain } from './dictionary'
import { machineMonitorDetail } from '@/api/asset/repair/asset-manage'
export default {
  name: 'asset_fault_monitor_detail',
  data () {
    return {
      detail: {},
      coupon: {},
      // 基本信息
      basic: [
        [
          { key: 'machineInstanceName', value: '', label: '故障机台：' },
          { key: 'machineInstanceSlotNo', value: '', label: '游戏位：' }
        ],
        [
          { key: 'supplyName', value: '', label: '机台供应商' },
          { key: 'snCode', value: '', label: '资产编码：' }
        ]
      ],
      // 故障诊断
      diagnosis: [
        [
          { key: 'faultLevel', value: '', label: '故障等级：' },
          { key: 'faultType', value: '', label: '对应故障：' }
        ],
        [{ key: 'faultStatus', value: '', label: '处理结果：' }, {}]
      ],
      declare: [
        [
          { key: 'quantity', value: '', label: '数量：' },
          { key: 'repairPart', value: '', label: '对应故障：' }
        ],
        [{ key: 'unit', value: '', label: '单位：' }, {}]
      ],
      checkAction: [
        [{ key: 'finalReviewStatus', value: '', label: '审核操作：' }],
        [{ key: 'finalReviewContent', value: '', label: '处理意见：' }]
      ]
    }
  },
  computed: {},
  filters: {
    faultLevelFilters (val) {
      let level = ''
      rank.forEach(item => {
        if (item.value === val) {
          level = item.name
        }
      })
      return level
    },
    faultStatusFilter (val) {
      let status = ''
      maintain.forEach(item => {
        if (item.value === val) {
          status = item.name
        }
      })
      return status
    }
  },
  created () {
    this.machineMonitorDetail()
  },
  methods: {
    async machineMonitorDetail () {
      const res = await machineMonitorDetail({ machineFaultId: this.$route.query.id })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      let data = res.data.data || {}
      this.fillData(data, this.basic)
      this.fillData(data, this.diagnosis)
      this.fillData(data, this.declare)
      this.fillData(data, this.checkAction)
    },
    // 填充数据
    fillData (data, tabelData) {
      let keys = Object.keys(data)
      tabelData = tabelData.map(item => {
        item.forEach(ele => {
          if (keys.includes(ele.key)) {
            ele.value = data[ele.key]
          }
        })
        return item
      })
    }
  }
}
</script>

<style lang="less" scoped>
.repair_report_detail {
  // width: 960px;
  margin: 0 auto;
  padding: 40px 80px;

  // margin-top: 100px;
  .ivu-table-border .table-border-none th,
  .ivu-table-border .table-border-none td {
    border-right: none;
  }
  .ivu-table .table-border-none th,
  .ivu-table .table-border-none td {
    border-bottom: none;
  }
  .imageUrl {
    max-width: 300px;
    max-height: 400px;
  }
  .ivu-table-cell-img {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .title {
    display: flex;
    align-items: center;
    margin: 20px 0;
  }
  .title-icon {
    display: inline-block;
    height: 20px;
    width: 8px;
    background: #2d8cf0;
    margin-right: 10px;
  }
}
</style>
